<!DOCTYPE html>
<script src="./static/lib/vue.js"></script>

<div id="main">
	<div v-if="isLogin" >
		用户名
		<div v-show="showInfo">
			<div>年龄</div>
			<div>身高</div>
			<div>性别</div>
		</div>
		<button >显示用户信息</button>
	</div>
	<div v-else>
		<button >登录</button>
	</div>
</div>

<script>
var vm = new Vue({
	el:"#main",
	data: {
		isLogin: false,
		showInfo: false,
	},
})
</script>

<script src="">
// v-if和v-show都是条件判断指令,通过判断对应内容的真伪实现视图上标签的显示和隐藏, 
// 区别: v-if是通过元素的创建和销毁实现标签的显示和隐藏,而v-show是通过改变标签的样式实现显示和隐藏

</script>